<template>
  <FormOutlined
    class="cursor-pointer svg-scale"
    @click="showModal"
    title="信息修改"
  />
  <a-modal
    title="修改Edgex服务"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    width="1000px"
    @ok="handleOk"
  >
    <ModifyEdgexForm ref="form" :edgex="edgex" />
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, inject, PropType, ref } from "vue";
import { FormOutlined } from "@ant-design/icons-vue";
import ModifyEdgexForm from "../forms/ModifyEdgexForm.vue";
import { Edgex } from "model";

export default defineComponent({
  name: "ModifyEdgexModal",
  components: {
    ModifyEdgexForm,
    FormOutlined,
  },
  props: {
    edgex: {
      type: Object as PropType<Edgex>,
      required: true,
    },
  },
  setup() {
    const refresh: Function = inject("refresh") ?? new Function();
    const form = ref();
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const handleOk = async () => {
      confirmLoading.value = true;
      if (await form.value.onSubmit()) {
        visible.value = false;
      }
      confirmLoading.value = false;
      refresh();
    };
    const showModal = () => {
      visible.value = true;
    };
    return { visible, handleOk, showModal, confirmLoading, form };
  },
});
</script>

<style scoped lang="scss"></style>
